{% extends 'music_base.html' %}
{% load static %}
{% block head %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;

        background-image: url("{{ MEDIA_URL }}{{ user_profile.background_image }}");
        background-size: cover;
    }
</style>
{% endblock %}
{% block title %}
实时排行榜
{% endblock %}

{% block body %}
<div class="profile-container">
    <div class="outer-box">
        <h2 class="page-title">
            音乐浏览量排行榜
        </h2>
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var ShowInfo = function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                $.ajax({
                    url: "/music/top/",
                    type: 'POST',
                    data: {},
                    success: function (result) {
                        if (result['code'] === 200) {
                            option = {
                                xAxis: {
                                    type: 'category',
                                    data: result['name_list']
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [
                                    {
                                        data: result['count_list'],
                                        type: 'bar'
                                    }
                                ]
                            };
                            myChart.setOption(option);
                        } else {
                            alert(result['message']);
                        }
                    }
                });
            };


            $(function () {
                var handler = new ShowInfo();
            });
        </script>
    </div>


</div>
{% endblock %}